<template>
  <el-dialog title="浏览文章" :visible.sync="showDialog" width="30%" center>
    <!-- 表单内容 -->

    <h2>{{ form.title }}</h2>

    <div>
      <span>{{ form.createTime }}</span>
      <span>{{ form.creatorID }}</span>
      <span><i class="el-icon-view"></i> {{ form.visits }}</span>
    </div>
    <div class="content">
      <p>{{ form.articleBody }}</p>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      showDialog: false,
      form: {
        title: '',
        createTime: '',
        creatorID: '',
        visits: '',
        articleBody: ''
      }
    }
  },
  methods: {
    cancel () {
      this.$refs.form.resetFields()
      this.showDialog = false
    }
  }
}
</script>

<style scoped lang="less">
div {
  span {
    padding: 5px;
  }
}
.content {
  height: 65px;
  background-color: #f5f5f5;
  color: #606266;
  font-size: 1px;
  line-height: 65px;
}
</style>
